<div class="card border-info m-3">
    <h5 class="card-header bg-info text-white">新增</h5>
    <div class="card-body">
        <h5 class="card-title">基础信息</h5>
        <p class="card-text">请按内容提示，录入相关信息。</p>
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">编号</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.serNum">
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['GooGoods.serNum'] !== null">{{errRes.error?.detail['GooGoods.serNum']}}</span>
            </div>
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">备注</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.serMemo">
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">商品名称</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.serGoodsName">
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['GooGoods.serGoodsName'] !== null">{{errRes.error?.detail['GooGoods.serGoodsName']}}</span>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <ng-select [items]="extend.domain.gooAttribute.items" bindLabel="name" bindValue="id"
                           [searchable]="true"
                           [multiple]="false" [closeOnSelect]="true"
                           placeholder="{{extend.domain.gooAttribute.nickname}}"
                           tooltip="{{extend.domain.gooAttribute.nickname}}"
                           (change)="extend.domain.gooAttribute.change($event)">
                </ng-select>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <ng-select [items]="extend.domain.gooAttributeValue.items" bindLabel="name" bindValue="id"
                           [searchable]="true"
                           [multiple]="true" [closeOnSelect]="true"
                           placeholder="{{extend.domain.gooAttributeValue.nickname}}"
                           tooltip="{{extend.domain.gooAttributeValue.nickname}}"
                           [(ngModel)]="selectedAttributeValueUUIDS"
                           (change)="extend.domain.gooAttributeValue.change($event)">
                </ng-select>
            </div>
            <div class="col-auto">
                <button class='btn btn-info' (click)="func.addAttribute()">添加</button>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-auto">
                <table class="table table-bordered text-nowrap bg-light zero3-list-table">
                    <thead class="sticky-top">
                    <tr class="text-center table-primary">
                        <th scope="col"><span>操作</span></th>
                        <th scope="col"><span>属性</span></th>
                        <th scope="col"><span>属性值</span></th>
                        <th scope="col"><span>排序(用于生成规格时属性所在属性)</span></th>
                    </tr>
                    </thead>
                    <tbody>
                    <ng-container *ngFor="let item of selectedAttributes | keyvalue">
                        <tr>
                            <td>
                                <button class='btn btn-outline-secondary btn-sm'
                                        (click)="func.deleteAttribute(item.key)">删除
                                </button>
                            </td>
                            <td>{{item.value.name}}</td>
                            <td>
                                <button type="button" *ngFor="let child of item.value['gooBaseGoodsAttributeValueList']"
                                        class="btn btn-outline-secondary btn-sm" style="margin-right:5px;">
                                    {{child.name}} <span class="badge badge-light"
                                                         (click)="func.deleteAttributeValue(item.key, child.fkGooAttributeValueUUID)">X</span>
                                </button>
                            </td>
                            <td><input type="number" [(ngModel)]="item.value.serOrder" class="form-control"/></td>
                        </tr>
                    </ng-container>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-auto">
            <button class="btn btn-primary" (click)="func.createSpecs()">生成规格</button>
            </div>
        </div>
        <!-- 规格列表 -->
        <div class="row mb-3" *ngIf="specs.length > 0">
            <div class="col-auto">
                <table class="table table-bordered text-nowrap bg-light zero3-list-table">
                    <thead class="sticky-top">
                    <tr class="text-center table-primary">
                        <th scope="col"><span>操作</span></th>
                        <th scope="col"><span>sku图片</span></th>
                        <th scope="col"><span>规格名称</span></th>
                        <th scope="col" *ngFor="let item of selectedAttributes | keyvalue"><span>{{item.value.name}}</span></th>
                        <th scope="col"><span>规格编号</span></th>
                    </tr>
                    </thead>
                    <tbody>
                    <ng-container *ngFor="let item of specs; let i = index">
                        <tr>
                            <td>
                                <button class='btn btn-outline-secondary btn-sm'
                                        (click)="func.deleteSpec(i)">删除
                                </button>
                            </td>
                            <td>
                                <img [src]="item.serSpecImg" *ngIf="item.serSpecImg" class="spec-img">
                                <input type="file" class="form-control-file file" (change)="func.updateSpecImg(i)"
                                ng2FileSelect [uploader]="createOSSUpload(i).uploader">
                                
                            </td>
                            <td>{{item.serName}}</td>
                            <td *ngFor="let attr of item['goodsSpecificationValues']">
                                {{attr.name}}
                            </td>
                            <td><input type="text" [(ngModel)]="item.serSpecNo" class="form-control"/></td>
                        </tr>
                    </ng-container>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">兑换所需积分</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.serGoodsJifenNum">
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['GooGoods.serGoodsJifenNum'] !== null">{{errRes.error?.detail['GooGoods.serGoodsJifenNum']}}</span>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">小标签</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.serGoodsTagId">
                </div>
            </div>
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">商品状态</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button btnCheckbox btnCheckboxTrue="ON" btnCheckboxFalse="OFF"
                                (click)="domain.serShelfState = domain.serShelfState === 'OFF' ? 'ON' : 'OFF'"
                                class="btn border-info w-100" type="button"
                                [ngClass]="{'btn-primary': domain.serShelfState === 'ON', 'disabled btn-secondary': domain.serShelfState === 'OFF'}">
                            {{domain.serShelfState === 'OFF' ? '下架' : '上架'}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">是否送积分</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button btnCheckbox btnCheckboxTrue="YESSEND" btnCheckboxFalse="NOSEND"
                                (click)="domain.serGoodsJifen = domain.serGoodsJifen === 'NOSEND' ? 'YESSEND' : 'NOSEND'"
                                class="btn border-info w-100" type="button"
                                [ngClass]="{'btn-primary': domain.serGoodsJifen === 'YESSEND', 'disabled btn-secondary': domain.serGoodsJifen === 'NOSEND'}">
                            {{domain.serGoodsJifen === 'NOSEND' ? '不送' : '送'}}
                        </button>
                    </div>
                </div>
            </div>
            <!--下拉框回显-->
            <div class="col-6">
                <ng-select [items]="extend.domain.serLevel1.items" [multiple]="false" [closeOnSelect]="true"
                           [searchable]="true" bindLabel="name" bindValue="id"
                           placeholder="{{extend.domain.serLevel1.nickname}}"
                           tooltip="{{extend.domain.serLevel1.nickname}}" [(ngModel)]="domain.serGoodsT1"
                           (change)="extend.domain.serLevel1.change($event)">
                </ng-select>
            </div>
        </div>
        <div class="row mb-3" *ngIf="domain.serGoodsJifen === 'YESSEND'">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-success border-success w-100" type="button">赠送积分值</button>
                    </div>
                    <input type="text" class="form-control border-success" [(ngModel)]="domain.serGoodsJifenVal">
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['GooGoods.serGoodsJifenVal'] !== null">{{errRes.error?.detail['GooGoods.serGoodsJifenVal']}}</span>
            </div>
            <div class="col-6">
            </div>
        </div>
        <div class="row mb-3">
            <!--下拉框回显-->
            <div class="col-6">
                <ng-select [items]="extend.domain.serLevel2.items" [multiple]="false" [closeOnSelect]="true"
                           [searchable]="true" bindLabel="name" bindValue="id"
                           placeholder="{{extend.domain.serLevel2.nickname}}"
                           tooltip="{{extend.domain.serLevel2.nickname}}" [(ngModel)]="domain.serGoodsT2"
                           (change)="extend.domain.serLevel2.change($event)">
                </ng-select>
            </div>
            <!--下拉框回显-->
            <div class="col-6">
                <ng-select [items]="extend.domain.serBrand.items" [multiple]="false" [closeOnSelect]="true"
                           [searchable]="true" bindLabel="name" bindValue="id"
                           placeholder="{{extend.domain.serBrand.nickname}}"
                           tooltip="{{extend.domain.serBrand.nickname}}" [(ngModel)]="domain.serGoodsBarndId"
                           (change)="extend.domain.serBrand.change($event)">
                </ng-select>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">是否最新单品</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button btnCheckbox btnCheckboxTrue="YES" btnCheckboxFalse="NO"
                                (click)="domain.serGoodsNew = domain.serGoodsNew === 'NO' ? 'YES' : 'NO'"
                                class="btn border-info w-100" type="button"
                                [ngClass]="{'btn-primary': domain.serGoodsNew === 'YES', 'disabled btn-secondary': domain.serGoodsNew === 'NO'}">
                            {{domain.serGoodsNew === 'NO' ? '不是' : '是'}}
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">打折（折数）</button>
                    </div>
                    <input type="text" class="form-control border-info border-right-0"
                           [(ngModel)]="domain.serGoodsDazhe">
                    <div class="input-group-append">
                        <span class="input-group-text border-info bg-white">%</span>
                    </div>
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['GooGoods.serGoodsDazhe'] !== null">{{errRes.error?.detail['GooGoods.serGoodsDazhe']}}</span>
            </div>
        </div>
        <!--<div class="row mb-3">-->
        <!--&lt;!&ndash;时间选择插件&ndash;&gt;-->
        <!--<div class="col-6">-->
        <!--<app-input-data-time [field]="extend.domain.serGoodsStartTime"></app-input-data-time>-->
        <!--</div>-->
        <!--&lt;!&ndash;时间选择插件&ndash;&gt;-->
        <!--<div class="col-6">-->
        <!--<app-input-data-time [field]="extend.domain.serGoodsEndTime"></app-input-data-time>-->
        <!--</div>-->
        <!--</div>-->
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">图片文字</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.serGoodsContent">
                </div>
            </div>
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">是否是积分商品</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button btnCheckbox btnCheckboxTrue="YESSEND" btnCheckboxFalse="NOSEND"
                                (click)="domain.serGoodsIsactive = domain.serGoodsIsactive === 'NOSEND' ? 'YESSEND' : 'NOSEND'"
                                class="btn border-info w-100" type="button"
                                [ngClass]="{'btn-primary': domain.serGoodsIsactive === 'YESSEND', 'disabled btn-secondary': domain.serGoodsIsactive === 'NOSEND'}">
                            {{domain.serGoodsIsactive === 'NOSEND' ? '不是' : '是'}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <ng-container aria-label="ossUpload">
                    <ng-container *ngFor="let file of extend.domain.files.fileUrls">
                        <div class="mb-2" style="border: 1px solid cadetblue; overflow: auto;">
                            <img [src]="file" style="height: 15rem;">
                            <p><span class="badge badge-success">{{file}}</span></p>
                            <button type="button" class="btn btn-sm btn-danger"
                                    (click)="extend.domain.files.del.click($event, file)">Del
                            </button>
                        </div>
                    </ng-container>
                    <input #file class="displayNone" type="file" ng2FileSelect
                           [uploader]="extend.domain.files.oss.uploader"
                           (change)="extend.domain.files.change($event)"/>
                </ng-container>
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">轮播图</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button class="btn btn-default border-info w-100" type="button" (click)="file.click()">选择
                        </button>
                    </div>
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['GooGoods.serGoodsBanner'] !== null">{{errRes.error?.detail['GooGoods.serGoodsBanner']}}</span>
            </div>

            <div class="col-6">
                <ng-container aria-label="ossUpload">
                    <div class="text-center mb-2"
                         *ngIf="domain.serGoodsP1 !== null && domain.serGoodsP1 !== undefined && domain.serGoodsP1.length > 0">
                        <img [src]="domain.serGoodsP1" style="height: 15rem;">
                        <p><span class="badge badge-success">{{domain.serGoodsP1}}</span></p>
                    </div>
                    <input #file1 class="displayNone" type="file" ng2FileSelect
                           [uploader]="extend.domain.fileSerGoodsP1.oss.uploader"
                           (change)="extend.domain.fileSerGoodsP1.change($event)"/>
                </ng-container>
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">瀑布流图</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button class="btn btn-default border-info w-100" type="button" (click)="file1.click()">选择
                        </button>
                    </div>
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['gooGoods.serGoodsP1'] !== null">{{errRes.error?.detail['gooGoods.serGoodsP1']}}</span>
            </div>
        </div>
        <div class="row mb-3">
            <!--单图上传-->
            <div class="col-6">
                <ng-container aria-label="ossUpload">
                    <div class="text-center mb-2" style="border: 1px solid cadetblue; overflow: auto;"
                         *ngIf="domain.serGoodsP2 !== null && domain.serGoodsP2 !== undefined && domain.serGoodsP2.length > 0">
                        <img [src]="domain.serGoodsP2" style="height: 15rem;">
                        <p><span class="badge badge-success">{{domain.serGoodsP2}}</span></p>
                    </div>
                    <input #file2 class="displayNone" type="file" ng2FileSelect
                           [uploader]="extend.domain.fileSerGoodsP2.oss.uploader"
                           (change)="extend.domain.fileSerGoodsP2.change($event)"/>
                </ng-container>
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">搜索/宫格图</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button class="btn btn-default border-info w-100" type="button" (click)="file2.click()">选择
                        </button>
                    </div>
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['gooGoods.serGoodsP2'] !== null">{{errRes.error?.detail['gooGoods.serGoodsP2']}}</span>
            </div>
            <div class="col-6">
                <ng-container aria-label="ossUpload">
                    <div class="text-center mb-2" style="border: 1px solid cadetblue; overflow: auto;"
                         *ngIf="domain.serGoodsP3 !== null && domain.serGoodsP3 !== undefined && domain.serGoodsP3.length > 0">
                        <img [src]="domain.serGoodsP3" style="height: 15rem;">
                        <p><span class="badge badge-success">{{domain.serGoodsP3}}</span></p>
                    </div>
                    <input #file3 class="displayNone" type="file" ng2FileSelect
                           [uploader]="extend.domain.fileSerGoodsP3.oss.uploader"
                           (change)="extend.domain.fileSerGoodsP3.change($event)"/>
                </ng-container>
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">长图</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button class="btn btn-default border-info w-100" type="button" (click)="file3.click()">选择
                        </button>
                    </div>
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['gooGoods.serGoodsP3'] !== null">{{errRes.error?.detail['gooGoods.serGoodsP3']}}</span>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-12">
                <h4>商品描述</h4>
                <div [froalaEditor]='froalaEditorOptions' [(froalaModel)]="domain.serGoodsDeac">Hello, Froala!</div>
            </div>
        </div>
        <div class="text-center mt-5">
            <button type="button" class="btn btn-outline-primary" (click)="func.save.req($event)">Save</button>
        </div>
    </div>
</div>

<span class="badge badge-info mr-3" *ngIf="errRes?.error?.timestamp !== null">response time:
    {{errRes?.error?.timestamp}}</span>
<div *ngIf="false">
    <p>{{errRes.error}}</p>
    <p>{{errRes.error?.code}}</p>
    <p>{{errRes.error?.description}}</p>
    <p>{{errRes.error?.theme}}</p>
    <p>{{errRes.error?.timestamp}}</p>
    <p>{{errRes.error?.detail?.RR?.duration}}</p>
    <p>{{errRes.error?.detail['GooGoods.serNum']}}</p>
    <p>{{errRes.error?.detail['GooGoods.serAudit']}}</p>
    <p>{{errRes.error?.detail['GooGoods.serValid']}}</p>
    <p>{{errRes.error?.detail['GooGoods.serValid2']}}</p>
    <p>{{errRes.headers}}</p>
    <p>{{errRes.message}}</p>
    <p>{{errRes.name}}</p>
    <p>{{errRes.ok}}</p>
    <p>{{errRes.status}}</p>
    <p>{{errRes.statusText}}</p>
    <p>{{errRes.url}}</p>
</div>
